import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table,Row,Col, message } from 'antd'
import { SearchOutlined} from "@ant-design/icons"
import {useNavigate} from "react-router-dom"






import {getHosListRequest,getProviceRequest,getCityOrDistrictRequest,changeStatusRequest} from  "@/api/hospital/hospitalList"
import type { getHosListSearchParamsType ,hospitalListContentType,hospitalListItemsType,provinceReturnTypes} from '@/api/hospital/model/hospitalListTypes'




export default function HospitalList() {
  // 编程式路由导航跳转
  const navigate=useNavigate();
  // 表单实例  用来提交数据
  const[form]=Form.useForm()
  //控制表格的是否加载中的状态
  const [isLoading, setIsLoading] = useState(false);
  //控制当前页码的状态
  const [page, setPage] = useState(1);
  //控制每页显示的条数
  const [limit, setLimit] = useState(3);
  //控制医院总数量
  const [total,setTotal]=useState(0)

  //控制查询时用户输入的表单参数
  const [searchParams, setSearchParams] = useState<getHosListSearchParamsType>({})
  // 控制表格的数据
  const [hospitalList,setHospitalList]=useState<hospitalListContentType>([])
   //控制省份的状态
  const [province,setProvince]=useState<provinceReturnTypes>([])
  //控制市的数据
  const [cityList,setCityList]=useState<provinceReturnTypes>([])
  // 控制区级的数据
  const [districtList,setDistrictList]=useState<provinceReturnTypes>([])
  // 控制医院类型
  const [hospitalType,setHospitalType]=useState<provinceReturnTypes>([])
  // 控制是否重新渲染
  const[reRender,setReRender]=useState(true)

  //1.刚加载组件的时候,发送医院列表的请求
  useEffect(() => {
    // 在请求开始时,设置加载状态为true
    setIsLoading(true)
    const getHospitalList = async () => {
      // page, limit, searchParams三个实参,改变就会重新发送请求,放在state中管理
      const result= await getHosListRequest(page, limit, searchParams)
      //把结果中的医院列表的数组设置给状态state
      setHospitalList(result.content)
     //把结果中的医院总数设置给状态state
      setTotal(result.totalElements)
       //请求完成后要把isLoading修改为false 
       setIsLoading(false)
    }
 
    getHospitalList()
  }, [searchParams,page,limit,reRender])

  //2.初始化的时候请求所有的省份
  useEffect(()=>{
    const getProvince = async ()=>{
    const result= await getProviceRequest()
    // console.log(result,"result")
    //把得到的省份列表放在state中
    setProvince(result)
    }
    getProvince()
  },[])
  //3.初始化的时候立即请求医院类型
  useEffect(()=>{
    const hosListType=async ()=>{
   const result= await getCityOrDistrictRequest("10000")
   //把医院类型设置给状态
   setHospitalType(result)
    }
    hosListType()
  },[])

  //事件回调函数
  //1.选择省份的时候事件回调函数
  const changeProviceHandle=async (value:string)=>{
    //根据省份的value 发送市的请求
      const result= await getCityOrDistrictRequest(value)
      setCityList(result)
       //选择完省份的时候,把市和区目前的value清除掉
      //  表单实例的方法是和表单中name属性挂钩的
      form.setFieldsValue({
        cityCode:null,
        districtCode:null
      })
       //清空县的数据
      setDistrictList([])
  }

  // 2.选择城市的时候事件回调函数
  const changeCityHandle=async (value:string)=>{
    //根据省份的value 发送市的请求
    const result= await getCityOrDistrictRequest(value)
     //把结果交给state保管
    setDistrictList(result)
    //选择完市级,把区目前的value清除掉
    form.setFieldsValue({
      districtCode:null
    })
}

// 3.查询表单的提交事件  表单上有一个方法
  const finishHandle=(value:getHosListSearchParamsType)=>{
    setSearchParams(value)
  }

  // 4.点击查询表单的清空按钮
  const clearSearchHandle=()=>{
    setSearchParams({})
  }
   //5.点击查看按钮事件回调函数
  const hospitalDetailHandle=(id:string)=>{
   return ()=>{
    navigate(`/syt/hospital/hospitalshow/${id}`)
   }
  }
  // 6.点击上线按钮 管理医院上下线状态  区分点击按钮 和onChange事件的区别
  const hosListStateHandle=(id:string,status:0|1)=>{
    return async ()=>{
    await changeStatusRequest(id,status)
    // 重新渲染
    setReRender(!reRender)
    // 全局提示
    message.success("医院状态修改成功")

    }
  }

 //7.点击排班规则
 const showScheduleHandle = (hoscode:string) => {
  return ()=>{ navigate(`/syt/hospital/hospitalSchedule/${hoscode}`)}
  
};



  // 表格的字段
  const columns = [
    {
      title: '序号',
      width: 60,
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      // 如果没有dataIndex设置,则render中拿到的数据就是当前的完整的数据
    //  render(_:any,data:hospitalListItemsType){
    //   return <img width={100} src={`data:image/jpeg;base64,${data.logoData}`} alt=""/>
    //  }

    // 如果设置了dataIndex,则render拿到的是dataIndex对应的数据
    dataIndex:"logoData",
    render(logoData:string){
      // ``是js语法  在虚拟dom中不能直接书写,需要{}  BS64有固定格式
      return <img  width={100} src={`data:image/jpeg;base64,${logoData}`} alt=""/>
    }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
     render(_:any,data:hospitalListItemsType){
      return data.param.hostypeString
     }
    },
    {
      title: '详细地址',
      render(_:any,data:hospitalListItemsType){
        return data.param.fullAddress
       }
    },
    {
      // 状态会变化  所以也要使用render方法
      title: '状态',
      render(_:any,data:hospitalListItemsType){
        return data.status===0?"下线":"上线"
       }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      render(_:any,data:hospitalListItemsType) {
        const {hoscode}=data;

        return (
          <div>
            <Button type='primary' onClick={hospitalDetailHandle(data.id)}>查看</Button>
            <Button type='primary' onClick={showScheduleHandle(data.hoscode)}>排班</Button>
            {/* 注意点击事件与onChange事件的区别  点击事件不会传值只是点击  ,在受控表单中onchange事件只要表单改变就能接收到值 */}
            <Button type='primary' onClick={hosListStateHandle(data.id,data.status===0?1:0)}>{data.status===0?"上线":"下线"}</Button>
          </div >
        )
      }
    }
  ];
  return (
    <div>
      <Card>
        <Form
          name="basic"
          form={form}
          // 查询表单的提交事件
          onFinish={finishHandle}
        >
          <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                name="provinceCode"
              >
                <Select
                  placeholder="请输入省份"
                  allowClear
                  onChange={changeProviceHandle}
                >
                  {
                    province.map(item=>{
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="cityCode"
              >
                <Select
                  placeholder="请输入市"
                  allowClear
                  onChange={changeCityHandle}
                >
                   {
                    cityList.map(item=>{
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                 
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="districtCode"
              >
                <Select
                  placeholder="请输入县/区"
                  allowClear
                >
                  {
                    districtList.map(item=>{
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                  
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hosname"
              >
                <Input placeholder="医院名称" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hoscode"
              >
                <Input placeholder='医院编号' />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hostype"
              >
                <Select
                  placeholder="医院类型"
                  allowClear
                >
                   {
                    hospitalType.map(item=>{
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                  
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                name="status"
              >
                <Select
                  placeholder="医院状态"
                  allowClear
                >
                  <Select.Option value={1}>上线</Select.Option>
                  <Select.Option value={0}>下线</Select.Option>
                </Select>
              </Form.Item>
            </Col >

            <Col span={2}>
              <Form.Item >
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />}  >
                  查询
                </Button>
              </Form.Item>

            </Col>
            <Col span={2} pull={1} style={{marginLeft:"20px"}} >
              <Form.Item >
                <Button type="default" htmlType="reset" onClick={clearSearchHandle}>
                  清空
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>



        <Table
          style={{ marginTop: "30px" }}
          columns={columns}
          dataSource={hospitalList}
          scroll={{ x: 1100 }}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          // 数据视图变化就是状态的改变
          loading={isLoading}

          pagination={{
            //页码的配置：当前页码
            current:page ,
            //总数据的数量  也是别人给我的 用状态保存起来,获取到数据好修改
            total:total ,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal(total) {
              return `总共有${total}条数据`
            },
            onChange(page:number,pageSize:number){
              setPage(page);
              setLimit(pageSize)
              
            }
          }}
        />
      </Card>
    </div >
  )
}
